<template>
  <div class="indexPage" style="margin-top: 50px">
    <el-row >
      <el-col :span="9" :offset="2">
          <el-card shadow="always"
                   style="display: flex;justify-content: center;justify-items: center;color: #478384">
            <div><i class="el-icon-document-copy"></i>本站文章总数</div>
            <div style="text-align: center">{{webArticleAll}}</div>
          </el-card>
      </el-col>
      <el-col :span="9" :offset="1">
        <el-card shadow="always"
                 style="display: flex;justify-content: center;justify-items: center;color: skyblue">
          <div><i class="el-icon-user"></i>个人文章总数</div>
          <div style="text-align: center">{{personalArticleAll}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 50px">
      <el-col :span="10" :offset="2" style="height: 400px">
        <div style="width: 100%; height: 100%" id="columnar"></div>
      </el-col>
      <el-col :span="10" style="height: 400px">
        <div style="width: 100%; height: 100%" id="circular"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "IndexPage",
  data(){
    return{
      webArticleAll:0,
      personalArticleAll:0
    }
  },

  mounted() {
    this.load();
  },
  methods:{
      load(){
        //柱状图
        var chartDomColumnar = document.getElementById('columnar');
        var myChartColumnar = echarts.init(chartDomColumnar);
        var optionColumnar;
        optionColumnar = {
          title:{
            text:"各季度文章统计表",
            subtext:"趋势图",
            x:"center"
          },
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient:"vertical",
            left: 'left',
          },
          xAxis: {
            type: 'category',
            data: ['第一季度', '第二季度', '第三季度', '第四季度']
          },
          yAxis: {
            type: 'value',
            minInterval:1,//自动计算的坐标轴最小间隔大小,可以解决数量少有小数的问题
          },
          series: [
            {
              name:"文章总数",
              data: [1,2,3],
              type: 'bar'
            },
            {
              name:"文章总数",
              data: [2,3,4],
              type: 'line'
            },
            {
              name:"个人文章",
              data: [1,2],
              type: 'bar'
            },
            {
              name:"个人文章",
              data: [3,4],
              type: 'line'
            }
          ]
        };

        //饼图
        var chartDomCircular = document.getElementById('circular');
        var myChartCircular = echarts.init(chartDomCircular);
        var optionCircular;
        optionCircular = {
          title: {
            text: '各季度个人文章统计表',
            subtext: '饼图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        //请求接口
        let uid = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).id : 0;
        this.$api.honeIndex(uid).then((res)=>{

          if (res.code !== 200) return

          let CircularData = [];

          //文章总数
          optionColumnar.series[0].data = res.data.articleAll
          optionColumnar.series[1].data = res.data.articleAll

          CircularData[0] = {value:res.data.personalAll[0],name:'第一季度'};
          CircularData[1] = {value:res.data.personalAll[1],name:'第二季度'};

          //个人文章总数
          optionColumnar.series[2].data = res.data.personalAll
          optionColumnar.series[3].data = res.data.personalAll

          CircularData[2] = {value:res.data.personalAll[2],name:'第三季度'};
          CircularData[3] = {value:res.data.personalAll[3],name:'第四季度'};

          optionCircular.series[0].data = CircularData
          //添加柱状和饼图
          myChartColumnar.setOption(optionColumnar)
          myChartCircular.setOption(optionCircular)

          //获取文章总数
          this.webArticleAll =  res.data.articleAll[3]
          //获取个人文章总数
          res.data.personalAll.map((item)=>{this.personalArticleAll += item;})
        })

      }
  }
}
</script>

<style lang="scss" scoped>
  .indexPage{

  }
</style>